<template>
  <div class="examRoom">
    <div class="examTop">
      <div class="currentRoom">
        <p class="p1">当前考场</p>
        <p class="p2">{{mainStudy}}</p>
        <div class="canavs">
          <canvas canvas-id="canvasImage"></canvas>
        </div>
      </div>
    </div>
    <div class="roomList">
      <p class="otherRoom">
        <span>其他考场</span>
      </p>
      <ul>
        <li v-for="(item,index) in imgList"
            :key=index
            @click.stop="chooiseExamRoom(index,item.id)">
          <p>{{item.name}}</p>
          <img :src=item.image>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      mainStudy: '国机党建',
      imgList: []
    }
  },
  computed: {
    ...mapState({
      currentExam: state => state.currentExam
    })
  },
  methods: {
    ...mapMutations(['setExamSubject']),
    chooiseExamRoom (index, id) {
      this.setExamSubject({
        currentId: id,
        currentName: this.imgList[index].name,
        roomIndex: index
      })
      wx.navigateBack({
        delta: 1
      })
    },
    drawImages (id) {
      let that = this
      // var id = this.$mp.query.id
      console.log(this.$mp.query.id)
      const ctx = wx.createCanvasContext('canvasImage')
      console.log(that.imgList)
      wx.getImageInfo({
        src: that.imgList[id].image,
        success (res) {
          console.log(res.path)
          ctx.drawImage(res.path, 0, 0, 200, 120)
          ctx.draw()
        }
      })
    },
    init () {
      let that = this
      console.log(that.$mp.query.id)
      wx.showLoading({
        title: 'loading'
      })
      this.$http.get('https://dati.co-links.com/exam/index', {
      }).then(function (res) {
        if (res.data.code === '0000') {
          console.log(res.data.data)
          wx.hideLoading()
          that.imgList = res.data.data
          for (var i = 0; i < that.imgList.length; i++) {
            that.imgList[i].image = 'https://dati.co-links.com/' + that.imgList[i].image
          }
          console.log(that.imgList)
        }
      })
    }
  },
  mounted () {
    console.log('mounted')
    this.mainStudy = this.currentExam.currentName
    console.log(this.currentExam.roomIndex)
    this.drawImages(this.currentExam.roomIndex || 0)
  },
  ready () {
    console.log('ready')
  },
  onLoad () {
    console.log('onload')
    this.init()
    // this.drawImages()
  }
}
</script>
<style lang="stylus" scoped>
.examRoom {
  padding: 0 32rpx;
}

canvas {
  width: 200px;
  height: 120px;
}

.examTop {
  height: 120px;
  background: white;
  border-radius: 14rpx;
  box-shadow: 0 5px 5px #ccc;
  position: relative;
  margin-top: 20rpx;

  p {
    padding-left: 60rpx;
  }

  .p1 {
    font-size: 38rpx;
    color: #00cc75;
    font-weight: bold;
    padding-top: 75rpx;
  }

  .p2 {
    color: #00cc75;
    font-size: 30rpx;
  }

  .canavs {
    position: absolute;
    right: 0;
    top: 0;
    width: 400rpx;
    height: 240rpx;
    overflow: hidden;

    canavs {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
}

.otherRoom {
  text-align: center;
  margin: 28rpx 0;

  span {
    display: inline-block;
    text-align: center;
    font-size: 30rpx;
    color: #00cc75;
    position: relative;
    padding: 0 20rpx;
    height: 40rpx;
    line-height: 40rpx;

    &::before {
      position: absolute;
      content: '';
      left: -88rpx;
      top: 20rpx;
      margin-top: -1rpx;
      width: 88rpx;
      height: 2rpx;
      background: linear-gradient(to right, #fff 0%, #04cb78 100%);
    }

    &::after {
      position: absolute;
      content: '';
      right: -88rpx;
      top: 20rpx;
      margin-top: -1rpx;
      width: 88rpx;
      height: 2rpx;
      background: linear-gradient(to right, #04cb78 0%, #fff 100%);
    }
  }
}

.roomList {
  ul {
    li {
      height: 140rpx;
      margin-top: 28rpx;
      background: white;
      border-radius: 14rpx;
      box-shadow: 0 3px 5px #ccc;
      position: relative;

      p {
        font-size: 34rpx;
        color: #666666;
        padding-left: 100rpx;
        font-weight: bold;
        line-height: 140rpx;
      }

      img {
        position: absolute;
        right: 0;
        top: 0;
        width: 264rpx;
        height: 140rpx;
      }
    }
  }
}
</style>
